<template>
  <div class="page">
    <div class="q-mt-md q-mb-md">
      <q-btn color="primary" label="添加用户"/>
    </div>
    <q-table
        :rows="data"
        :columns="columns"
        row-key="name"
    />
    <div class="row justify-center q-mt-md">
      <q-pagination
          v-model="pagination.page"
          color="grey-8"
          :max="pagesNumber"
          size="sm"
      />
    </div>
  </div>
</template>

<script>
import {ref, computed} from 'vue'
import {search} from "../../api/user";

export default {
  name: "Index",
  setup() {
    const columns = [
      {
        field: 'id',
        label: 'ID'
      },
      {
        field: 'username',
        label: '用户名'
      },
      {
        field: 'nickname',
        label: '昵称'
      }
    ];

    const data = ref([]);

    const fetchData = () => {
      search({page: 0}).then(res => {
        data.value = data.value.concat(res.content);
        pagination.value.page = res.number + 1;
        pagination.value.rowsPerPage = res.size;
        pagination.value.rowsNumber = res.totalElements;
      })
    }

    fetchData();

    const pagination = ref({
      page: 2,
      rowsPerPage: 10,
      rowsNumber: 10
    });

    const rows = [];

    return {
      pagination,
      columns,
      data,

      pagesNumber: computed(() =>
          Math.ceil(data.value.length / pagination.value.rowsPerPage)
      ),
    }
  }
}
</script>

<style scoped>

</style>